<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--IE Compatibility modes-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--Mobile first-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Login Page</title>
    
    <meta name="description" content="Free Admin Template Based On Twitter Bootstrap 3.x">
    <meta name="author" content="">
    
    <meta name="msapplication-TileColor" content="#5bc0de" />
    <meta name="msapplication-TileImage" content="/static/img/metis-tile.png" />
    
    <!-- Bootstrap -->
    <link rel="stylesheet" href="/static/lib/bootstrap/css/bootstrap.css">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/static/lib/font-awesome/css/font-awesome.css">
    
    <!-- Metis core stylesheet -->
    <link rel="stylesheet" href="/static/css/main.css">
    
    <!-- metisMenu stylesheet -->
    <link rel="stylesheet" href="/static/lib/metismenu/metisMenu.css">
    
    <!-- animate.css stylesheet -->
    <link rel="stylesheet" href="/static/lib/animate.css/animate.css">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body class="login">
    <div class="form-signin">
        <div class="text-center" style="background-color: #4A5B7D">
            <img src="http://www.xianhuahua.com/index/images/logo1.png" alt="Metis Logo">
        </div>
        <hr>
        <div class="tab-content">
            <div id="login" class="tab-pane active">
                <form id="login-form" th:action="@{/login}" method="post">
                    <!--<p class="text-muted text-center" th:if="${param.error}" >用户名或密码错误</p>-->

                    <p class="text-muted text-center" th:if="${error_msg}"  th:text="${error_msg}"></p>
                    <p class="text-muted text-center" th:if="${param.logout}">
                        您已注销成功
                    </p>
                    <input name="_csrf" type="hidden" id="_csrf" value="">
                    <p>
                        <input type="text" name="username" placeholder="用户名" th:value="${username}" class="form-control top">
                    </p>
                    <p>
                        <input type="password" name="password" placeholder="密码" th:value="${password}" class="form-control bottom">
                    </p>
                    <p>
                        <input type="text" th:value="${verifyCode}" name="verifyCode" maxlength="4" style="width: 182px;height: 40px" placeholder="请输入验证码" autocomplete="off">
                        <img src="/verify" id="getcode_num" width="100px" height="40px" style="padding-bottom: 2px;cursor:pointer" title="看不清，点击换一张"
                            align="absmiddle">
                    </p>
                    <div class="checkbox">
                    </div>
                    <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
                </form>
            </div>
            <div id="forgot" class="tab-pane">
                <form action="index.html">
                    <p class="text-muted text-center">Enter your valid e-mail</p>
                    <input type="email" placeholder="" class="form-control">
                    <br>
                    <button class="btn btn-lg btn-danger btn-block" type="submit">Recover Password</button>
                </form>
            </div>
        </div>
        <hr>
        <div class="text-center">
            <ul class="list-inline">
                <li>
                    <a class="text-muted" href="#login" data-toggle="tab">登录</a>
                </li>
                <li>
                    <a class="text-muted" href="#forgot" data-toggle="tab">忘记密码</a>
                </li>
            </ul>
        </div>
    </div>


    <!--jQuery -->
    <script src="/static/lib/jquery/jquery.js"></script>

    <!--Bootstrap -->
    <script src="/static/lib/bootstrap/js/bootstrap.js"></script>


    <script type="text/javascript">
        (function ($) {
            $(document).ready(function () {
                $('.list-inline li > a').click(function () {
                    var activeForm = $(this).attr('href') + ' > form';
                    //console.log(activeForm);
                    $(activeForm).addClass('animated fadeIn');
                    //set timer to 1 seconds, after that, unload the animate animation
                    setTimeout(function () {
                        $(activeForm).removeClass('animated fadeIn');
                    }, 1000);
                });
            });
        })(jQuery);
    </script>

    <script>
        $(function () {
            $("#getcode_num").click(function () {
                $(this).attr("src", '/verify?' + Math.random());
            });
        });
    </script>
    </script>

</body>

</html>